<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            transition: all .5s;
        }

        ul {
            list-style: none;
            padding: 100px;
            display: flex;
            justify-content: center;
        }

        li {
            padding: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        li.active {
            color: #0d0;
            border-color: #0d0;
        }

        li:first-child {
            border-radius: 10px 0 0 10px;
        }

        li:last-child {
            border-left: 0 none #000;
            border-radius: 0 10px 10px 0;
        }

        .white {
            background-color: #fff;
            color: #333;
        }

        .black {
            background-color: #333;
            color: #fff;
        }

        p {
            font-size: 34px;
            line-height: 50px;
            max-width: 1200px;
            margin: auto;
        }
    </style>
</head>

<body class="white">
    <ul>
        <li class="active">白色主题</li>
        <li>黑色主题</li>
    </ul>
    <p>
        效果： 点击切换不同的主题，要求使用操作类名的方式实现
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quas dolorum laborum quibusdam consequatur
        voluptate similique quo voluptatibus tempora, a perspiciatis sit porro architecto, et neque est omnis, maiores
        eos.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quas dolorum laborum quibusdam consequatur
        voluptate similique quo voluptatibus tempora, a perspiciatis sit porro architecto, et neque est omnis, maiores
        eos.</p>

    <script>
        var lis = document.querySelectorAll('ul li');
        lis.forEach((item, index) => {
            item.onclick = function () {
                let isWhite = index === 0;
                lis.forEach(li => li.classList.remove('active'))
                this.classList.add('active')

                document.body.classList.remove(isWhite ? 'black' : 'white')
                document.body.classList.add(isWhite ? 'white' : 'black')
            }
        })
    </script>
</body>

</html>